<template>
  <div class="my-history">
   <div class="item-avatar-one" v-for="item in list" :key="item.id">
           <div class="top"  @click="goToUser">
             <van-image
               width="0.9rem"
               height="0.9rem"
               fit="cover"
               round
               :src="item.article.user.avatar ? item.article.user.avatar : avatar"
             />
             <div class="author" v-if="item.article.user">
               <a>{{item.article.user.nickname}}</a>
               <span class="introduce">已关注 .  {{item.createdAt | relativeTime}}  . {{item.article.user.introduce}}  </span>
             </div>
             <div class="right-bnt">
               <van-button size="small">关注</van-button>
             </div>
           </div>
           <div class="centre">
             <div class="left">
               <h1 @click="goToArticle">{{item.article.title}}</h1>
             </div>
             <div class="right" @click="goToArticle">
               <van-image
                 width="120"
                 height="90"
                 fit="cover"
                 :src="item.article.cover_img"
               />
             </div>
           </div>
           <div class="bottom">
             <BottomOperation :article='item.article'/>
           </div>
         </div>
         <ShareSheet />
       </div>
   </template>

<script>
import BottomOperation from '@/components/User/bottom-operation.vue'
import ShareSheet from '@/views/Article/components/share-sheet.vue'
import {getUserArticleViewHistory} from '@/api/article'
export default {
  name: 'my-history',
  components: {
    BottomOperation,
    ShareSheet
  },
  props:{
    userId:{
      type:Number,
      required:true
    }
  },
  data () {
    return {
      query:{
        pageNum:1, pageSize:10
      },
      list:[],
      total:0,
      avatar:'https://img01.yzcdn.cn/vant/cat.jpeg'
    }
  },
  created () {
    this.getUserArticleViewHistory(this.userId,this.query)
  },
  methods: {
    goToUser () {
      this.$router.push('/user')
    },
    goToArticle () {
      const id = 3
      this.$router.push('/article/' + id)
    },
    async getUserArticleViewHistory(id,data){
       const res = await getUserArticleViewHistory(id,data)
       this.query.pageNum = res.pageNum
       this.query.pageSize = res.pageSize
       this.list = res.list
       this.total = res.total
     }
  }
}
</script>

<style lang="scss" scoped>
.my-history {
  background-color: rgb(247, 247, 247);
  text-align: left;
}

.item-avatar-one {
  margin-top: 10px;
  padding: 15px 15px 5px 15px;
  box-sizing: border-box;
  background-color: #fff;
  .top {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .author {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 10px;
      a {
        font-size: 14px;
        font-weight: 500;
      }
      span {
        font-size: 12px;
        color: #ccc;
      }
      .introduce{
        max-width: 260px;
        overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 1; //行数
          -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    .right-bnt{
      // float: right;
      position: absolute;
      right: 0;
      top: -5px;
    }
  }
  .centre {
    display: flex;
    .left {
      // position: relative;
      display: flex;
      align-items:center;
      justify-content: space-between;
      width: 230px;
      margin-right: 14px;
      h1 {
        font-size: 16px;
        margin: 0;
      }
    }
    .right {
      border-radius: 4px;
      overflow: hidden;
    }
  }

}
</style>
